<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="css/skin/skin_01.css" id="skinCss">
	<link rel="stylesheet" type="text/css" href="css/detail.css">
	<!-- jqzoom的css设置 -->
	<link rel="stylesheet" type="text/css" href="css/jqzoom.css">
	<!-- thickbox的css设置 -->
	<link rel="stylesheet" type="text/css" href="css/thickbox.css">
	<script src="js/jquery.js" type="text/javascript"></script>
	<!-- 使用jq的cookie插件保存风格设置 -->
	<script src="js/jquery.cookie.js" type="text/javascript"></script>
	<!-- 更换背景风格 -->
	<script src="js/changeSkin.js" type="text/javascript"></script>
	<!-- 输入框交互实现 -->
	<script src="js/input.js" type="text/javascript"></script>
	<!-- 导航菜单交互实现 -->
	<script src="js/nav.js" type="text/javascript"></script>
	<!-- 设置hot类 -->
	<script src="js/addHot.js" type="text/javascript"></script>
	<!-- jqzoom插件js -->
	<script src="js/jquery.jqzoom.js" type="text/javascript"></script>
	<!-- jqzoom自定义js文件 -->
	<script src="js/jqzoom.js" type="text/javascript"></script>
	<!--thickbox插件js -->
	<script src="js/jquery.thickbox.js" type="text/javascript"></script>
	<!--点击小图大图自动适应js -->
	<script src="js/switchImg.js" type="text/javascript"></script>
	<!--详情切换的tab js -->
	<script src="js/proTab.js" type="text/javascript"></script>
	<!--切换尺寸选项 -->
	<script src="js/switchSize.js" type="text/javascript"></script>
	<!--计算总价 -->
	<script src="js/totalPrice.js" type="text/javascript"></script>
	<!--星星变换 -->
	<script src="js/switchStar.js" type="text/javascript"></script>
	<!--购物车 -->
	<script src="js/buyCart.js" type="text/javascript"></script>
	
</head>
<body>
	<!--头部-->
	<header class="header">
		<div class="header__wrap">
			<div class="header__logo"> 
				<h1>
					<a title="JQ_Shopping" href="index.html"><img alt="JQ_Shopping" src="img/logo.gif">
					</a>
				</h1> 
			</div><!--logo结束-->
			<div class="header__search-box">            
              	<input class="search-box__input" type="text" value="请输入商品名称" id="inputSearch01">
            </div><!--搜索框结束-->
			<ul class="header__skin">
				<li id="skin_01" class="skin__item skin__item_blue selected"  title="蓝色" ></li>
				<li id="skin_02" class="skin__item skin__item_violet"  title="紫色"></li>
				<li id="skin_03" class="skin__item skin__item_red"  title="红色"></li>
				<li id="skin_04" class="skin__item skin__item_sky-blue"  title="天蓝色"></li>
				<li id="skin_05" class="skin__item skin__item_orange"  title="橙色"></li>
				<li id="skin_06" class="skin__item skin__item_pale-green"  title="淡绿色"></li>
			</ul><!-id="skin_01" -风格框结束-->
			<nav class="header__nav">
				<ul>
					<li class="nav__item nav__item_top">
						<a href="javascript:;" class="item__a">首 页</a>
					</li>
					<li class="nav__item">
						<a href="javascript:;" class="item__a">品 牌</a>
						<div class="item__submenu" style="display:none;">
							<dl class="submenu__dl submenu__dl_top">
								<dt class="dl__dt"><a href="#">品 牌:</a></dt>
								<dd class="dl__dd">
									<a href="#nogo">耐克</a>
									<a href="#nogo">阿迪达斯</a>
									<a href="#nogo">达芙妮</a>
									<a href="#nogo">李宁</a>
									<a href="#nogo">安踏</a>
									<a href="#nogo">奥康</a>
									<a href="#nogo">骆驼</a>
									<a href="#nogo">特步</a>
									<a href="#nogo">淑女屋</a>
									<a href="#nogo">贵人鸟</a>
									<a href="#nogo">水晶鞋</a>
									<a href="#nogo">鸿星尔克</a>
									<a href="#nogo">鳄鱼</a>
								</dd>
							</dl>
							<dl class="submenu__dl">
								<dt class="dl__dt"><a href="#">品 牌:</a></dt>
								<dd class="dl__dd">
									<a href="#nogo">耐克</a>
									<a href="#nogo">阿迪达斯</a>
									<a href="#nogo">达芙妮</a>
									<a href="#nogo">李宁</a>
									<a href="#nogo">安踏</a>
									<a href="#nogo">奥康</a>
									<a href="#nogo">骆驼</a>
									<a href="#nogo">特步</a>
									<a href="#nogo">淑女屋</a>
									<a href="#nogo">贵人鸟</a>
									<a href="#nogo">水晶鞋</a>
									<a href="#nogo">鸿星尔克</a>
									<a href="#nogo">鳄鱼</a>
								</dd>
							</dl>
						</div>
					</li>
					<li class="nav__item">
						<a href="javascript:;" class="item__a">女 装</a>
						<div class="item__submenu" style="display:none;">
							<dl class="submenu__dl submenu__dl_top">
								<dt class="dl__dt"><a href="#">品 牌:</a></dt>
								<dd class="dl__dd">
									<a href="#nogo">耐克</a>
									<a href="#nogo">阿迪达斯</a>
									<a href="#nogo">达芙妮</a>
									<a href="#nogo">李宁</a>
									<a href="#nogo">安踏</a>
									<a href="#nogo">奥康</a>
									<a href="#nogo">骆驼</a>
									<a href="#nogo">特步</a>
									<a href="#nogo">淑女屋</a>
									<a href="#nogo">贵人鸟</a>
									<a href="#nogo">水晶鞋</a>
									<a href="#nogo">鸿星尔克</a>
									<a href="#nogo">鳄鱼</a>
								</dd>
							</dl>
							<dl class="submenu__dl">
								<dt class="dl__dt"><a href="#">品 牌:</a></dt>
								<dd class="dl__dd">
									<a href="#nogo">耐克</a>
									<a href="#nogo">阿迪达斯</a>
									<a href="#nogo">达芙妮</a>
									<a href="#nogo">李宁</a>
									<a href="#nogo">安踏</a>
									<a href="#nogo">奥康</a>
									<a href="#nogo">骆驼</a>
									<a href="#nogo">特步</a>
									<a href="#nogo">淑女屋</a>
									<a href="#nogo">贵人鸟</a>
									<a href="#nogo">水晶鞋</a>
									<a href="#nogo">鸿星尔克</a>
									<a href="#nogo">鳄鱼</a>
								</dd>
							</dl>
						</div>
					</li>
					<li class="nav__item">
						<a href="javascript:;" class="item__a">男 装</a>
						<div class="item__submenu" style="display: none;">
							<dl class="submenu__dl submenu__dl_top">
								<dt class="dl__dt"><a href="#">品 牌:</a></dt>
								<dd class="dl__dd">
									<a href="#nogo">耐克</a>
									<a href="#nogo">阿迪达斯</a>
									<a href="#nogo">达芙妮</a>
									<a href="#nogo">李宁</a>
									<a href="#nogo">安踏</a>
									<a href="#nogo">奥康</a>
									<a href="#nogo">骆驼</a>
									<a href="#nogo">特步</a>
									<a href="#nogo">淑女屋</a>
									<a href="#nogo">贵人鸟</a>
									<a href="#nogo">水晶鞋</a>
									<a href="#nogo">鸿星尔克</a>
									<a href="#nogo">鳄鱼</a>
								</dd>
							</dl>
							<dl class="submenu__dl">
								<dt class="dl__dt"><a href="#">品 牌:</a></dt>
								<dd class="dl__dd">
									<a href="#nogo">耐克</a>
									<a href="#nogo">阿迪达斯</a>
									<a href="#nogo">达芙妮</a>
									<a href="#nogo">李宁</a>
									<a href="#nogo">安踏</a>
									<a href="#nogo">奥康</a>
									<a href="#nogo">骆驼</a>
									<a href="#nogo">特步</a>
									<a href="#nogo">淑女屋</a>
									<a href="#nogo">贵人鸟</a>
									<a href="#nogo">水晶鞋</a>
									<a href="#nogo">鸿星尔克</a>
									<a href="#nogo">鳄鱼</a>
								</dd>
							</dl>
						</div>
					</li>
					<li class="nav__item">
						<a href="javascript:;" class="item__a">鞋包服饰</a>
						<div class="item__submenu" style="display: none;">
							<dl class="submenu__dl submenu__dl_top">
								<dt class="dl__dt"><a href="#">品 牌:</a></dt>
								<dd class="dl__dd">
									<a href="#nogo">耐克</a>
									<a href="#nogo">阿迪达斯</a>
									<a href="#nogo">达芙妮</a>
									<a href="#nogo">李宁</a>
									<a href="#nogo">安踏</a>
									<a href="#nogo">奥康</a>
									<a href="#nogo">骆驼</a>
									<a href="#nogo">特步</a>
									<a href="#nogo">淑女屋</a>
									<a href="#nogo">贵人鸟</a>
									<a href="#nogo">水晶鞋</a>
									<a href="#nogo">鸿星尔克</a>
									<a href="#nogo">鳄鱼</a>
								</dd>
							</dl>
							<dl class="submenu__dl">
								<dt class="dl__dt"><a href="#">品 牌:</a></dt>
								<dd class="dl__dd">
									<a href="#nogo">耐克</a>
									<a href="#nogo">阿迪达斯</a>
									<a href="#nogo">达芙妮</a>
									<a href="#nogo">李宁</a>
									<a href="#nogo">安踏</a>
									<a href="#nogo">奥康</a>
									<a href="#nogo">骆驼</a>
									<a href="#nogo">特步</a>
									<a href="#nogo">淑女屋</a>
									<a href="#nogo">贵人鸟</a>
									<a href="#nogo">水晶鞋</a>
									<a href="#nogo">鸿星尔克</a>
									<a href="#nogo">鳄鱼</a>
								</dd>
							</dl>
						</div>
					</li>
				</ul>
			</nav><!--nav结束-->
		</div><!--wrap结束-->		
	</header>
	<section class="content">
		<aside class="content__aside">
			<h2 class="aside__title" title="商品分类">商品分类</h2>
			<dl class="aside__list">
				<dt class="list__title">推荐品牌</dt>
				<dd class="list__content">
					<a href="#nogo">耐克</a>
					<a href="#nogo" class="hot">阿迪达斯</a>
					<a href="#nogo">达芙妮</a>
					<a href="#nogo">李宁</a>
					<a href="#nogo">奥康</a>
					<a href="#nogo">安踏</a>
					<a href="#nogo" class="hot">特步</a>
					<a href="#nogo">骆驼</a>
				</dd>
			</dl>
			<dl class="aside__list">
				<dt class="list__title">女装</dt>
				<dd class="list__content">
					<a href="#nogo">呢大衣</a>
					<a href="#nogo">T恤</a>
					<a href="#nogo" class="hot">羽绒</a>
					<a href="#nogo">衬衫</a>
					<a href="#nogo">羊绒衫</a>
					<a href="#nogo">针织</a>
					<a href="#nogo">连衣裙</a>
					<a href="#nogo">皮外套</a>
				</dd>
			</dl>
			<dl class="aside__list">
				<dt class="list__title">男装</dt>
				<dd class="list__content">
					<a href="#nogo">衬衫</a>
					<a href="#nogo">T恤衫</a>
					<a href="#nogo">夹克</a>
					<a href="#nogo">大皮衣</a>
					<a href="#nogo" class="hot">风衣</a>
					<a href="#nogo">牛仔裤</a>
					<a href="#nogo">西服</a>
					<a href="#nogo">卫衣</a>
				</dd>
			</dl>
			<dl class="aside__list">
				<dt class="list__title">鞋包配饰</dt>
				<dd class="list__content" >
					<a href="#nogo">围巾</a>
					<a href="#nogo">旅行箱</a>
					<a href="#nogo">真皮包</a>
					<a href="#nogo">韩版</a>
					<a href="#nogo">达芙妮</a>
					<a href="#nogo">单肩包</a>
					<a href="#nogo">毛线</a>
					<a href="#nogo" class="hot">清仓靴子</a>
				</dd>
			</dl>
		</aside><!--侧边栏结束-->
		<!--右侧内容开始-->
		<div class="content__right">
			<div class="pro_detail">
				<div class="jqzoomWrap">
			        <a href="./img/pro_img/blue_one_big.jpg" class="jqzoom"  title="免烫高支棉条纹衬衣" rel="gal1">
			            <img src="./img/pro_img/blue_one_small.jpg" title="免烫高支棉条纹衬衣" alt="免烫高支棉条纹衬衣" id="bigImg" />
			        </a>
				</div><!--产品大图区域结束--> 
				<!--查看大图按钮-->
				<a id = "thickImg" href="./img/pro_img/blue_one_big.jpg" class="show-big-img thickbox" title="蓝色衬衫大图1"></a>
				<!--小图按钮开始-->
				<ul class="small-img-button">
					<li class="img-button__item " >
						<a href="#nogo" rel="{gallery:'gal1',smallimage:'./img/pro_img/blue_one_small.jpg',largeimage:'./img/pro_img/blue_one_big.jpg'}">
							<img src="./img/pro_img/blue_one.jpg" alt="蓝色衬衫图1">
						</a>	
					</li>
					<li class="img-button__item ">
						<a href="#nogo" rel="{gallery:'gal1',smallimage:'./img/pro_img/blue_two_small.jpg',largeimage:'./img/pro_img/blue_two_big.jpg'}">
							<img src="./img/pro_img/blue_two.jpg" alt="蓝色衬衫图2">
						</a>	
					</li>
					<li class="img-button__item " >
						<a href="#nogo" rel="{gallery:'gal1',smallimage:'./img/pro_img/blue_three_small.jpg',largeimage:'./img/pro_img/blue_three_big.jpg'}">
							<img src="./img/pro_img/blue_three.jpg" alt="蓝色衬衫图3">
						</a>
					</li>
					<li class="img-button__item" >
						<a href="#nogo" rel="{gallery:'gal1',smallimage:'./img/pro_img/yellow_two_small.jpg',largeimage:'./img/pro_img/yellow_two_big.jpg'}">
							<img src="./img/pro_img/yellow_one.jpg" alt="黄色衬衫图1">
						</a>
					</li>
					<li class="img-button__item" >
						<a href="#nogo" rel="{gallery:'gal1',smallimage:'./img/pro_img/yellow_two_small.jpg',largeimage:'./img/pro_img/yellow_two_big.jpg'}">
							<img src="./img/pro_img/yellow_two.jpg" alt="黄色衬衫图2">
						</a>
					</li>
					<li class="img-button__item" >
						<a href="#nogo" rel="{gallery:'gal1',smallimage:'./img/pro_img/yellow_three_small.jpg',largeimage:'./img/pro_img/yellow_three_big.jpg'}">
							<img src="./img/pro_img/yellow_three.jpg" alt="黄色衬衫图3">
						</a>
					</li>
					<li class="img-button__item" >
						<a href="#nogo" rel="{gallery:'gal1',smallimage:'./img/pro_img/green_one_small.jpg',largeimage:'./img/pro_img/green_one_big.jpg'}">
							<img src="./img/pro_img/green_one.jpg" alt="绿色衬衫图1">
						</a>
					</li>
					<li class="img-button__item" ><a href="#nogo" rel="{gallery:'gal1',smallimage:'./img/pro_img/green_two_small.jpg',largeimage:'./img/pro_img/green_two_big.jpg'}">
							<img src="./img/pro_img/green_two.jpg" alt="绿色衬衫图2">
						</a>
					</li>
				</ul>
				<!--小图按钮结束-->
				<!--产品信息列表开始-->
				<div class="pro-tabs">
					<ul class="pro-tabs__top clearfix">
						<li class="select">产品属性</li>
						<li>产品尺码表</li>
						<li>产品介绍</li>
					</ul>
					<div class="pro-tabs__centent">
						<p>沿用风靡百年的经典全棉牛津纺面料，通过领先的液氨整理技术，使面料的抗皱性能更上一层。延续简约、舒适、健康设计理念，特推出免烫、易打理的精细免烫牛津纺长袖衬衫系列。</p>
						<p class="hide">来自新疆无污染的生态棉花，采用紧密纺精梳棉纱，单经双纬的织造组织，造就了颗粒饱满、朴实无华、温润细腻的经典牛津纺，易洗快干、手感丰软、吸湿性好。设计师遵循布料完美肌理，立体剪裁，曲摆的现代人性化裁减，相得益彰，浑然天成。</p>
						<p class="hide">世界权威德国科德宝的衬和英国高士缝纫线使成衣领型自然舒展、永不变形，缝线部位平服工整、牢固耐磨；人性化的4片式后背打褶结构设计提供更舒适的活动空间；领尖扣的领型设计戴或不戴领带风格炯同、瞬间呈现；醇正天然设计，只为彰显自然荣耀。</p>
					</div>
				</div>
			</div>
			<!--产品信息列表结束-->
			<!--右侧产品信息模块-->
			<div class="pro_options">
				<h4>免烫高支棉条纹衬衣</h4>
				<p>全新精品高支棉衬衫再次提升品质，精选100%新疆长绒棉织造而成，平整度好，短绒少； 80-100高支双股经纬交织，带来无与伦比的舒适享受；而且面料反光效果好，具有漂亮的光泽，质感上佳，有利于免烫效果的维持！</p>
				<div class="pro_options__price">价　　格： <em>379.00元</em></div>
				<div class="pro_options__sale" id="price">促　　销： <em>200.00</em> 元</div>
				<dl class="pro_options__color clearfix">
					<dt>颜　　色： <em>蓝白</em></dt>
					<dd>
						<ul>
							<li >
								<a href="#nogo" rel="{gallery:'gal1',smallimage:'./img/pro_img/blue_one_small.jpg',largeimage:'./img/pro_img/blue_one_big.jpg'}" title="蓝白">
									<img src="./img/pro_img/blue.jpg" alt="颜色选择1" width="34" height="34">
								</a>
							</li>
							<li >
								<a href="#nogo" rel="{gallery:'gal1',smallimage:'./img/pro_img/yellow_one_small.jpg',largeimage:'./img/pro_img/yellow_one_big.jpg'}" title="黄白">
									<img src="./img/pro_img/yellow.jpg" alt="颜色选择2" width="34" height="34">
								</a>
							
							</li>
							<li >
								<a href="#nogo" rel="{gallery:'gal1',smallimage:'./img/pro_img/green_one_small.jpg',largeimage:'./img/pro_img/green_one_big.jpg'}" title="粉绿">
									<img src="./img/pro_img/green.jpg" alt="颜色选择3" width="34" height="34">
								</a>
							</li>
						</ul>
					</dd>
				</dl>
				<dl class="pro_options__size clearfix">
					<dt>尺　　寸： <em>未选择</em></dt>
					<dd>
						<ul>
							<li>S</li>
							<li>L</li>
							<li>SL</li>
							<li>LL</li>
						</ul>
					</dd>
				</dl>
				<dl>
					<dt>数　　量：</dt>
					<dd>
						<select name="selectNum" id="selectNum">
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
						</select>
					</dd>
				</dl>
				<div id="totalPrice">总　　计： <em>200</em>元</div>
				<dl class="pro_options__score">
					<dt>给商品评分：</dt>
					<dd>
						<ul class="nonestar">
							<li class="one"><a href="#nogo" title="1分">1</a></li>
							<li class="two"><a href="#nogo" title="2分">2</a></li>
							<li class="three"><a href="#nogo" title="3分">3</a></li>
							<li class="four"><a href="#nogo" title="4分">4</a></li>
							<li class="five"><a href="#nogo" title="5分">5</a></li>
						</ul>
					</dd>
				</dl>
				<div id="btn-cart">
					<input type="button" value="">
				</div>
			</div>
		</div>
		<!--尾部-->
	<footer class="footer">Copyright © 2009 - 2012 JaneShop Inc.</footer>
	</section>
</body>